<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- 添加子路由导航 -->
    <p>导航 ：
      <router-link to="/home">首页</router-link> |
      <router-link to="/home/one">-子页面1</router-link> |
      <router-link to="/home/two">-子页面2</router-link>
      <router-link :to="{name: 'one', params:{username:'test123'}}">子页面1</router-link>
      <router-link to="/home/two/1/张三">子页面2</router-link>

    </p>
    <button @click="toThreePage">页面3-params传参</button>
    <!-- 子页面展示部分 -->
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    data () {
      return {
        msg: 'Home Page!'
      }
    },
    methods: {
      toThreePage() {
        // this.$router.push({name: 'three', params: {id: 1, name: 'zhangsan'}})
        this.$router.push({path: '/home/three', query: {id: 1, name: 'zhangsan'}})
      }

    }
  }
</script>

<style scoped>
</style>
